<template>
  <div class="subject-detailsub">
    <div class="detailsub clearfix">
      <div class="clearfix" style="margin-bottom: 30px">
        <div  class="colleft" >专题名称:</div>
        <div  class="colright" >{{subjectList.subjectName}}</div>
      </div>
      <div class="clearfix" style="margin-bottom: 30px">
        <div  class="colleft" >轮播封面:</div>
        <div  class="colright " >
          <div class="img-box">
            <img :src="subjectList.picUrl" alt="pic">
          </div>
        </div>
      </div>
      <div class="clearfix" style="margin-bottom: 30px">
        <div  class="colleft">专题详情介绍:</div>
        <pre  class="colright yuanyang" >{{subjectList.detailContent}}</pre>
      </div>
      <div class="clearfix">
        <div class="colleft" >专题随手拍提示文案:</div>
        <pre  class="colright yuanyang" >{{subjectList.hint}}</pre>
      </div>
      <div class="editbt" @click="gotoedit" v-if="showeditbt">编辑</div>
      <div class="editbt" @click="goBack" v-if="!showeditbt">返回</div>
      </div>
    <div class="allulitem list-nodata" v-if="!subjectList">
      暂无数据
    </div>
    <!--提示框-->
    <Modal class="warning-modal"
           v-model="showWarnModal"
           title="温馨提示"
           width="550"
           height="250"
    >
      <div class="warn-modal-body">
        <i class="modal-icon"></i>
        <p class="modal-content">{{warnContent}}</p>
      </div>
      <div slot="footer">
        <div class="warn-modal-footer">
          <span class="modal-close-btn" @click="closeModal">确定</span></div>
      </div>
    </Modal>
  </div>
</template>
<script>
  import index from  "./subject-detail.js"
  export default index ;
</script>
<style>
  .clearfix:after{content: '';display: block; clear: both}
  .subject-detailsub{
    padding: 20px 30px 0;
  }
  .detailsub{
    padding: 30px;
    border: 1px solid #DDDEE3;
    font-size: 14px;
    color: #2B3642;
    letter-spacing: 0;
    line-height: 22px;
  }
  .colleft{
    text-align: right;
    padding-right: 22px;
    width: 160px;
    float: left;
    color: #777E8C;
  }
  .yuanyang{
    overflow: auto;
    max-height: 210px;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-indent: 0px;
  }
  .img-box{
    width: 375px;
    height: 190px;
    display: inline-block;
    text-align: center;
    background: #eee;
    position: relative;
  }
  .img-box img{
    position: absolute;
    top:50%;left: 50%;
    transform: translate(-50% ,-50%);
    -webkit-transform: translate(-50%, -50%);
    max-width: 100% ; max-height: 100% ;display: inline-block;
  }
  .editbt{
    margin-top: 20px;
    background: #3F94FC;
    border-radius: 2px;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0;
    line-height: 40px;
    padding-left: 59px;
    padding-right: 59px;
    float: right;
    cursor:pointer;
  }
</style>
